<template>
  <div>
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt=""/>
    </div>
    <div class="login_container"   >
      <!-- 登录块 -->
      <div class="login_box">
        <!-- 表单区域 -->
        <h2  >登录</h2>
        <el-form ref="loginFormRef" :model="loginForm"   :rules="loginRules" :v-model="login" class="login_form" label-width="0">
          <!-- 用户id -->
          <el-form-item prop="id">
            <el-input v-model="loginForm.id" placeholder="账号" prefix-icon="iconfont icon-long" class="in">用户名</el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item  prop="password">
            <el-input v-model="loginForm.password" placeholder="密码" prefix-icon="iconfont icon-mime"  show-password class="in"></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item  class="btns">
            <el-button type="primary" @click="login" >登录</el-button>
            <el-button type="info" @click="registerForm()">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import Cookie from 'js-cookie'
import {getMenu} from "@/api";

export default{
  data(){
    return {
      imgSrc:require('../assets/myLove.jpg'),
      //表单数据
      loginForm:{
        id:"",
        password:""
      },
      //验证对象
      loginRules:{
        //校验id
        id:[
          { required: true, message: '用户id为必填项', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
        ],
        //校验密码
        password:[
          { required: true, message: '用户密码为必填项', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    registerForm(){//重置用户名和密码方法
      this.$router.push({path:"/register"});
    },
    login(){
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          // 传入表单数据
          getMenu(this.loginForm).then((data) => {
            console.log(data);
            if(data.data.code===20000){
              // 记录cookie
              window.sessionStorage.setItem('token',data.data.data.token)
              Cookie.set('token',data.data.data.token)
              // 动态添加路由
              this.$store.commit('addMenu',this.$router)
              // 跳转到首页
              this.$router.push('/Home')
            }else{
              // 验证失败的弹窗
              this.$message.error(data.data.data.message);
            }
          })
        }
      })
    }
  }
}
</script>

<style  scoped>
.login_container{
  background-color:palegreen;

}
.login_box{
  width: 450px;
  height: 300px;
  /* background-color: #ffffff; */
  background: rgba(255,255,255,0.3);
  border: 1px solid black;
  opacity: 0.85;
  filter: alpha(opacity=90);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);

}
.avatar_box{
  width: 130px;
  height: 130px;
  border:30px solid #eee;
  border-radius: 50%;
  padding: 0px;
  box-shadow: 0 0 2px #ddd;
  left:50%;

}
.btns{
  display: flex;
  justify-content: space-around;
}
.login_form{
  position: absolute;
  bottom: 0%;
  width: 100%;
  border: 30px;
}
.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: absolute;
}
.in{
  margin-left: 10%;
  margin-right: 10%;
  width: 350px;
}
h1,h2,h3{

  font-size: xx-large;

  color:rgb(7, 7, 7);

  text-align:center;

}
</style>
